<template>
    <a-cascader
        v-model:value="data.idList"
        multiple
        style="width: 300px"
        max-tag-count="responsive"
        :options="options"
        :load-data="loadData"
        placeholder="请选择"
        notFoundContent="无"
        allowClear
        bordered
        :show-checked-strategy="Cascader.SHOW_CHILD"
    ></a-cascader>
</template>

<script lang="ts" setup name="">
    import { tagApi } from "@/api/titleStore";
    import type { CascaderProps } from "ant-design-vue";
    import { Cascader } from 'ant-design-vue';
    const options = ref<CascaderProps["options"]>([]);
    const props = defineProps<{
        data: {
            currentPid: number;
            idList: number[];
        };
    }>();

    const getOptions = () => tagApi({}, "get", props.data.currentPid || 0);
    const loadData: CascaderProps["loadData"] = (selectedOptions) => {
        const targetOption = selectedOptions[selectedOptions.length - 1];
        targetOption.loading = true;
        if (props.data.currentPid === -1) {
            // 防止选到了请选择 还继续向后查找
            return;
        }
        props.data.currentPid = targetOption.value as number;
        getOptions()
            .then((res) => {
                if(res.data.data.length){
                    targetOption.children = res.data.data.map((item: any) => {
                        item["isLeaf"] = false;
                        return item;
                    });
                }else{
                    targetOption.isLeaf = true
                }
                
            })
            .finally(() => {
                targetOption.loading = false;
            });
    };

    onMounted(() => {
        getOptions().then((res) => {
            options.value = res.data.data.map((item: any) => {
                item["isLeaf"] = false;
                return item;
            });
        });
    });
</script>

<style scoped lang="scss"></style>
